<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" background-color="#324157"
            text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
            <template v-for="item in items">
                <template v-if="item">
                    <el-menu-item :index="item.permissionUrl" :key="item.permissionUrl">
                        <template #title>{{ item.permissionName}}</template>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>

import { computed} from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import request from '../utils/request';
export default {
	data() {
		return {
			items: [],
			judgeDorm: 0,
			judgePay: 0
		}
	},
	created() {
		this.getList()
	},
	methods: {
		getList() {
			request({
				method: 'get',
				url: '/api/dorm/select',
				headers: {'jwtToken': this.$store.getters.getToken}
			}).then(res => {
				if (res.code === 200) {
					this.judgeDorm = 1;
				}
			})
			request({
				method: 'get',
				url: '/api/pay/select',
				headers: {'jwtToken': this.$store.getters.getToken}
			}).then(resp => {
				if (resp.code === 200) {
					this.judgePay = 1;
				}
				request.get('/api/user/getMenuList',
					{
						headers: {'jwtToken': this.$store.getters.getToken}
					}).then(res => {
					this.items = res.data;
					if (this.judgeDorm === 1 ) {
						this.items[1].permissionUrl = '/dist/selected'
					}
					if (this.judgePay === 1 ) {
						this.items[2].permissionUrl = '/dist/payed'
					}
					this.$store.commit('SET_MENU', this.items);
					this.$router.replace(this.items[0].permissionUrl);
				})
			})
		}
	},
	setup() {
		const store = useStore();

		const route = useRoute();

		const onRoutes = computed(() => {
			return route.path;
		});


		const collapse = computed(() => store.state.collapse);


		return {
			onRoutes,
			collapse,
		};
	},
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 150px;
}
.sidebar > ul {
    height: 100%;
}
</style>
